'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _extends3 = require('babel-runtime/helpers/extends');

var _extends4 = _interopRequireDefault(_extends3);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _collapse = require('antd/lib/collapse');

var _collapse2 = _interopRequireDefault(_collapse);

var _radio = require('antd/lib/radio');

var _radio2 = _interopRequireDefault(_radio);

var _BoxModel = require('./common/BoxModel');

var _BoxModel2 = _interopRequireDefault(_BoxModel);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var Panel = _collapse2['default'].Panel;

var RadioButton = _radio2['default'].Button;
var RadioGroup = _radio2['default'].Group;

var EditorMargin = function (_Component) {
  (0, _inherits3['default'])(EditorMargin, _Component);

  function EditorMargin(props) {
    (0, _classCallCheck3['default'])(this, EditorMargin);

    var _this = (0, _possibleConstructorReturn3['default'])(this, (EditorMargin.__proto__ || Object.getPrototypeOf(EditorMargin)).call(this, props));

    _this.onChange = function (e) {
      var value = (0, _extends4['default'])({}, _this.props.value, (0, _defineProperty3['default'])({}, _this.state.key, e));
      _this.props.onChange('margin', value);
    };

    _this.getTabs = function () {
      return _react2['default'].createElement(
        RadioGroup,
        { value: _this.state.key, onChange: _this.radioChange, size: 'small' },
        Object.keys(_this.props.locale.tags).map(function (key) {
          return _react2['default'].createElement(
            RadioButton,
            { value: key, key: key, className: 'ant-radio-button-auto-width' },
            _this.props.locale.tags[key]
          );
        })
      );
    };

    _this.radioChange = function (e) {
      _this.setState({
        key: e.target.value
      });
    };

    _this.keys = ['top', 'right', 'bottom', 'left', 'center'];
    _this.state = {
      key: 'margin'
    };
    return _this;
  }

  (0, _createClass3['default'])(EditorMargin, [{
    key: 'render',
    value: function render() {
      var props = (0, _objectWithoutProperties3['default'])(this.props, []);
      var value = props.value,
          locale = props.locale;

      var key = this.state.key;
      ['value', 'tags', 'onChange'].map(function (str) {
        return delete props[str];
      });
      return _react2['default'].createElement(
        Panel,
        (0, _extends4['default'])({}, props, { header: props.header || locale.header }),
        this.getTabs(),
        _react2['default'].createElement(_BoxModel2['default'], {
          name: key,
          key: key,
          keys: this.keys,
          value: value[key],
          onChange: this.onChange
        })
      );
    }
  }]);
  return EditorMargin;
}(_react.Component);

EditorMargin.propTypes = {
  value: _propTypes2['default'].object,
  onChange: _propTypes2['default'].func,
  header: _propTypes2['default'].string,
  locale: _propTypes2['default'].object
};
EditorMargin.defaultProps = {
  value: {
    margin: null,
    padding: null
  },
  onChange: function onChange() {}
};
exports['default'] = EditorMargin;


EditorMargin.componentName = 'EditorMargin';
module.exports = exports['default'];